<template>
  <div class="basic_wrap">
    <div class="newTitle">
      <img src="@/assets/img/leftGray.png" class="backIcon" @click="$router.back()">
      <div class="title">团队列表</div>
    </div>
    <div class="search">
      <div class="input">
        <input type="text" placeholder="请输入搜索会员名称" v-model="keyword">
        <img src="@/assets/img/searchImg.png" class="searchImg">
        <div class="btn" @click="toSearch">搜索</div>
      </div>
    </div>
    <div class="cont">
      <van-list v-model="loading" loading-text=" " offset="100" :finished="finished"
                :finished-text="$t('utils.noData')" @load="onLoad">
        <div class="item" v-for="(item,index) in list" :key="index">
<!--          <div class="itemLeft">-->
<!--            <img src="@/assets/img/leftGray.png">-->
<!--          </div>-->
          <div class="itemRight">
            <div class="top">
              <div class="name">{{item.username}}</div>
              <img :src="item.mlogo" v-if="item.mlogo">
              <div class="lev" v-if="item.depth != 0">
                <div v-if="item.depth == 1">A</div>
                <div v-else-if="item.depth == 2">B</div>
                <div v-else-if="item.depth > 2">M</div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="bottom">
              <div class="botItem">
                <div class="btTop">充值</div>
                <div class="btBot">{{item.value}}</div>
              </div>
              <div class="botItem">
                <div class="btTop">总投资</div>
                <div class="btBot">{{item.invest_money}}</div>
              </div>
              <div class="botItem">
                <div class="btTop">总收益</div>
                <div class="btBot">{{item.income}}</div>
              </div>
              <div class="botItem">
                <div class="btTop">贡献</div>
                <div class="btBot">{{item.parent_profit}}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import Fetch from '../../utils/fetch'
import Clipboard from "v-clipboard";
import QRCode from 'qrcodejs2'
import {
  Icon,
  List,
  Empty,
  Popup
} from "vant";
Vue.use(Icon).use(Clipboard).use(List).use(Empty).use(Popup);
export default {
  name: "team",
  data() {
    return {
      detail:{},
      loading: false,
      finished: false,
      page: 1,
      listRows: 8,
      list:[],
      keyword:'',
      depth:0
    };
  },
  created() {

  },
  mounted() {

  },
  methods:{
    toSearch(){
      this.page = 1
      this.list = []
      this.onLoad()
    },
    onLoad() {
      Fetch('/user/info', {
        isapp: 0
      },'',false).then((res) => {
        if(res.code == 1){
          this.depth = res.data.depth
          Fetch('/user/teamList', {
            page: this.page,
            listRows: this.listRows,
            keyword:this.keyword
          }).then(r => {
            var list = r.data.list;
            for (var i = 0; i < list.length; i++) {
              list[i].depth = list[i].depth - this.depth
              this.list.push(list[i]);
            }
            if (this.list.length >= r.data.length) {
              this.finished = true;
              return;
            }
            this.page = this.page + 1;
            this.loading = false;
          });
        }
      });
    }
  },
};
</script>

<style lang="less" scoped>
   .basic_wrap{
     background-image: url(../../assets/img/otherBac.png);
     background-size: cover;
     background-position: center top;
     min-height: 100vh;
     width: 100vw;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     .newTitle{
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
       .backIcon{
         position: absolute;
         top: 50%;
         left: 20px;
         transform: translate(-50%,-50%);
         width: 16px;
         height: 16px;
       }
       .title{
         font-size: 16px;
         font-weight: bold;
       }
     }
     .search{
       display: flex;
       justify-content: center;
       padding: 20px 0 8px;
       .input{
         display: flex;
         align-items: center;
         position: relative;
          input{
            border-radius: 8px;
            width: 80vw;
            height: 40px;
            background: #F5F9FF;
            padding-left: 40px;
          }
         .searchImg{
           position: absolute;
           top: 50%;
           left: 10px;
           width: 20px;
           height: 20px;
           transform: translate(0,-50%);
         }
         .btn{
            width: 40px;
            height: 40px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 8px;
           background: linear-gradient(0deg, #1348FF 0%, #018DFF 100%);
           margin-left: 10px;
           color: #ffffff;
         }
       }
     }
     .cont{
       padding: 16px 16px 80px;
       background: #ffffff;
       flex: 1;
       .item{
         border-bottom: 1px solid #A3A3A3;
         padding: 16px 0 20px;
         .itemRight{
           .top{
             display: flex;
             align-items: center;
             margin-bottom: 7px;
             .lev{
               font-size: 16px;
               font-weight: bold;
               color: red;
               margin-left: 10px;
             }
             .name{
               font-size: 14px;
               font-weight: bold;
               margin-right: 5px;
             }
             img{
               width: 20px;
               height: 20px;
             }
             .time{
               flex: 1;
               text-align: right;
               color: #A3A3A3;
             }
           }
           .bottom{
             display: flex;
             .botItem{
               margin-right: 48px;
               .btTop{
                 color: #A3A3A3;
                 margin-bottom: 6px;
               }
               .btBot{}
             }
           }
         }
       }
     }
   }
</style>
